<template>
    <div class="notice">
      <ul class="notice_ul">
        <li class="each_li" v-for="n in 10">
          <div class="top">
              <div class="name">关于国庆中秋假期上班通知说明</div>
              <div class="time">2017-10-04 22:28</div>
              <div class="content">亲爱的用户：节假日快乐！关于国庆中秋长假期间众多用户关注并资讯的假期上班情况，先说明如下：众所周知，关于国庆中秋长假期间众多用户关注并资讯的假期上班情况，先关于国庆中秋长假期间众多用户关注并资讯的假期上班情况，先关于国庆中秋长假期间众多用户关注并资讯的假期上班情况，先关于国庆中秋长假期间众多用户关注并资讯的假期上班情况，先</div>
          </div>
          <div class="bottom">
            <div class="txt">立即查看</div>
            <div class="gt"><i class="iconfont icon-gt"></i></div>
          </div>
        </li>
      </ul>
  </div>
</template>

<script>
export default {
  name: "study_notice",
  data() {
    return {};
  },

  mounted: function() {
    this.$nextTick(function() {});
  },
  methods: {}
};
</script>
<style scoped lang='less'>
.notice {
  .notice_ul {
    background:#f0f1f4;
    .each_li {
      margin-top:0.05rem;
      .top {
        padding: 0.12rem 0.15rem;
        margin-bottom:0.01rem;
        background:#ffffff;
        .name{
          height: 0.295rem;
          line-height: 0.295rem;
          font-size:0.13rem;
          color:#333333;
          font-weight: 600;
        }
        .time{
          color:#999999;
          font-size:0.13rem;
          height: 0.21rem;
          line-height: 0.21rem;
        }
        .content{
          line-height: 0.2rem;
          color:#545454;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          word-wrap:break-word;
          overflow: hidden;
        }
      }
      .bottom {
        padding: 0 0.15rem;
        background:#ffffff;
        display: flex;
        .txt{
          height: 0.4rem;
          width:1rem;
          line-height: 0.4rem;
          color:#50d8be;
          font-size:0.13rem;
          font-weight: 600;
        }
        .gt{
          flex: 1;
          text-align: right;
          height: 0.4rem;
          line-height: 0.4rem;
          color:#cccccc;
        }

      }
    }
  }
}
</style>
